<template>
  <div style="display: flex;line-height: 68px;">
    <div style="margin-top: 8px; ">
      <i :class="icon" style="font-size: 20px;cursor: pointer" @click="collapse"></i>
    </div>
    <div style="flex: 1;text-align: center;font-size: 34px">
      <span style="font-family: cursive">欢迎来到药品数据上报及用药数据分析系统</span>
    </div>
    <div v-if="this.username===''">
      您未登录请 <span @click="Login" class="login" style="cursor: pointer">登录</span>
    </div>
    <el-dropdown v-else>
      <span>{{ this.$store.state.userName }}</span>
      <i class="el-icon-arrow-down" style="margin-left: 5px"></i>
      <el-dropdown-menu slot="dropdown">
        <el-dropdown-item @click.native="toUser">个人资料</el-dropdown-item>
        <el-dropdown-item @click.native="logout">退出登录</el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>
    <div style="margin-top: 8px; ">
      <el-badge :value="this.$store.state.UnreadNum" class="item">
        <i class="el-icon-bell" style="margin-left: 35px;font-size: 20px;cursor: pointer" @click="message"></i>
      </el-badge>
    </div>
  </div>
</template>

<script>
// 用户输入密码时加密使用
// encode为加密，decode为解密
import {loginSelectByUsername} from "@/api/user";
import {getUnreadNum} from "@/api/messaage";

let Base64 = require("js-base64");
export default {
  name: "Header",
  data() {
    return {
      username: '',
      role: ''
    }
  },
  props: {
    icon: String
  },
  methods: {
    Login() {
      this.$router.push("/login");
    },
    toUser() {
      this.$router.push("/home/userinfo").catch((err) => err);
    },
    logout() {
      console.log('logout')
      this.$confirm('您确定要退出登录?', '提示', {
        confirmButtonText: '确定',  //确认按钮的文字显示
        type: 'warning',
        center: true, //文字居中显示
      })
          .then(() => {
            this.$message({
              type: 'success',
              message: "退出登录成功"
            })
            this.$store.commit("updateLoginUserNickname", "");
            this.$store.commit("removeStorage");
            this.$router.push("/")
            sessionStorage.clear()
          })
          .catch(() => {
            this.$message({
              type: 'info',
              message: "已取消退出登录"
            })
          });
    },
    collapse() {
      this.$emit('doCollapse')
    },
    message() {
      this.$router.push("/home/received").catch((err) => err);
    },
    UnreadNum() {
      console.log(this.$store.state.userId)
      getUnreadNum({
        id: this.$store.state.userId
      }).then((res) => {
        if (res.flag == true) {
          this.$store.commit("updateUnreadNum", res.data)
          console.log(res.data)
        } else {
          this.$message.error(res.data);
        }
      })
    }
  },
  created() {
    if (window.localStorage.token) {
      let token = window.localStorage.token;
      let arr = token.split(".");
      let res = Base64.decode(arr[1]);
      this.$store.commit("updateRole", JSON.parse(res).role);
      this.$store.commit("updateUserName", JSON.parse(res).username);
      this.username = JSON.parse(res).username
      this.role = JSON.parse(res).role
      loginSelectByUsername({}).then((res) => {
        console.log(res.data.id);
        this.$store.commit("updateUserId", res.data.id);
        this.UnreadNum()
      });
    }
    if (this.username === '') {
      this.$router.push("/").catch((err) => err);
    }

  }
}
</script>

<style scoped>

</style>